<template>
  <div class="leftNav">
    <div class="logo">
      <img src="@/assets/logo.png" alt />
    </div>
    <el-menu
      style="width: 256px"
      unique-opened
      :default-active="$route.path"
      router
      class="el-menu-vertical-demo"
      background-color="#001529"
      text-color="#fff"
    >
      <div v-for="(item1, index) in navConfig" :key="index">
        <div v-if="item1.children && item1.children.length > 0">
          <el-submenu :index="'' + index">
            <template slot="title">
              <img
                :src="item1.icon"
                alt
                style="width: 14px; height: 14px; margin-right: 12px"
              />
              <span>{{ item1.permissionName }}</span>
            </template>
            <div v-if="item1.children">
              <div v-for="(item2, idx) in item1.children" :key="idx">
                <div v-if="item2.children">
                  <el-submenu
                    :index="'' + index + '-' + idx"
                    class="my-el-submenu"
                  >
                    <template slot="title">{{ item2.permissionName }}</template>
                    <div v-if="item2.children">
                      <el-menu-item
                        @click.native="refreshRouter"
                        v-for="(item3, i) in item2.children"
                        :key="i"
                        :index="item3.router"
                        ><span style="padding-left: 10px">{{
                          item3.permissionName
                        }}</span></el-menu-item
                      >
                    </div>
                  </el-submenu>
                </div>
                <div v-else>
                  <el-menu-item
                    :index="item2.router"
                    @click.native="refreshRouter"
                    >{{ item2.permissionName }}</el-menu-item
                  >
                </div>
              </div>
            </div>
          </el-submenu>
        </div>
        <div v-else>
          <el-menu-item :index="item1.router" @click.native="refreshRouter">
            <img
              :src="item1.icon"
              alt
              style="width: 14px; height: 14px; margin-right: 12px"
            />{{ item1.permissionName }}</el-menu-item
          >
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import navConfig from "./navConfig";

export default {
  inject: ["reload"],
  data() {
    return {
      navConfig: [],
      menu: "",
      routerChange: false,
    };
  },
  watch: {
    "$route.path"(newRouter, oldRouter) {
      this.routerChange = true;
      setTimeout(() => {
        this.routerChange = false;
      }, 500);
    },
  },
  mounted() {
    if (!this.$store.state.userInfo) {
      return;
    } else {
      this.setMenu();
    }
  },
  methods: {
    // 刷新当前路由
    refreshRouter() {
      if (!this.routerChange) {
        this.reload();
      }
    },
    //设置菜单
    setMenu() {
      // 获取返回的菜单原始数据
      let menus = JSON.parse(JSON.stringify(this.$store.state.userInfo.list));
      menus.forEach((item) => {
        //1.设置菜单图标
        switch (item.permissionId) {
          case 10:
            item.icon = require("../assets/permissions-icon.png");
            break;
          case 40:
            item.icon = require("../assets/dynamic-icon.png");
            break;
          case 110:
            item.icon = require("../assets/about-icon.png");
            break;
          case 150:
            item.icon = require("../assets/service-icon.png");
            break;
          case 300:
            item.icon = require("../assets/apply-icon.png");
            break;
          case 340:
            item.icon = require("../assets/bgcSet.png");
            break;
        }
      });
      // // 2.设置显示的主菜单
      let mainMenu = menus.filter((item) => {
        // 如果不是菜单 item.menu=false，或者没有权限的item.havePermission=false不显示
        return item.havePermission && item.menu;
      });
      // 设置1级子菜单 所有1级子菜单中没有非菜单权限暂不标记子菜单 是路由还是按钮权限
      mainMenu.forEach((item, index) => {
        //  item.children = "";
        //  return
        if (
          !item.children ||
          !item.children.length ||
          !item.menu ||
          !item.havePermission
        ) {
          // 如果不满足显示条件 1级菜单子集处理为 ''
          item.children = "";
        } else {
          //2级子菜单

          item.children = item.children.filter((children) => {
            // 处理需要显示的菜单
            return children.havePermission && children.menu;
          });
          // 判断是路由还是按钮权限 如果是按钮权限所有路由则不显示
          item.children.forEach((item1) => {
            if (item1.children && item1.children.length) {
              item1.children = item1.children.filter((item2) => {
                return item2.havePermission && item2.menu;
              });
              item1.children.forEach((item3) => {
                this.setRouter3(item3.permissionId, item3);
              });
              // 如果是子路由是空的话 改成''格式
              item1.children = item1.children.length ? item1.children : "";
              this.setRouter2(item1.permissionId, item1);
            } else {
              this.setRouter2(item1.permissionId, item1);
              item1.children = "";
            }
          });
        }
      });

      this.navConfig = mainMenu;
    },
    // 设置2菜单路由
    setRouter2(id, target) {
      switch (id) {
        // 权限管理S
        case 20:
          target.router = "/permissions/role";
          break;
        case 30:
          target.router = "/permissions/user";
          break;

        // 协会动态S
        case 50:
          target.router = "/dynamic/construction";
          break;
        case 60:
          target.router = "/dynamic/association";
          break;
        case 70:
          target.router = "/dynamic/branch";
          break;
        case 80:
          target.router = "/dynamic/vip";
          break;
        case 90:
          target.router = "/dynamic/activity";
          break;
        case 100:
          target.router = "/dynamic/live";
          break;

        //关于我们
        case 120:
          target.router = "/about/introduce";
          break;
        case 140:
          target.router = "/about/vipList";
          break;

        //协会服务

        case 160:
          target.router = "/service/project";
          break;
        case 170:
          target.router = "/service/capital";
          break;
        case 180:
          target.router = "/service/property";
          break;
        case 190:
          target.router = "/service/market";
          break;
        case 200:
          target.router = "/service/energizeService";
          break;
        case 210:
          target.router = "/service/explain";
          break;
        //服务申请管理
        case 310:
          target.router = "/apply/financial";
          break;
        case 320:
          target.router = "/apply/energize";
          break;
        case 330:
          target.router = "/apply/attract";
          break;
        //轮播图设置
        case 350:
          target.router = "/bgcSet/carousel";
          break;
        case 360:
          target.router = "/bgcSet/other";
          break;
      }
    },
    // 设置3级菜单路由
    setRouter3(id, target) {
      switch (id) {
        case 4:
          target.router = "/sysManage/role";
          break;
        case 9:
          target.router = "/sysManage/user";
          break;
        case 14:
          target.router = "/sysManage/organize";
          break;
        case 24:
          target.router = "/client/registeredUser";
          break;
        case 29:
          target.router = "/client/clientInfo";
          break;
        case 32:
          target.router = "/client/vip";
          break;
        case 34:
          target.router = "/client/training";
          break;
        case 35:
          target.router = "/client/accountDuration";
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.leftNav {
  width: 257px;
  overflow-x: hidden;
  background-color: #001529;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
  .logo {
    height: 64px;
    background-color: #002140;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 85%;
    }
  }
}
</style>
